<template>
  <view>
    <view class="title">消化道癌症风险评估</view>
    <view class="content">
      癌症是严重威胁人们健康的疾病。但是大部分的癌症是可防可治的。让我们来做个评估，看看自己有哪些因素会升高常见癌症风险，应该如何做来降低风险？又该做哪些检查来及时把癌症扼杀在摇篮里？
    </view>
    <view class="content">
      本次评估不记名，不存储，请放心填写！为了反映真实风险，请按照您的实际情况填写！
    </view>
    <view class="content">
      请先填写以下个人信息：
    </view>

    <view class="item">
      <view class="uni-form-item">
        <view class="">您的年龄</view>
        <input class="uni-input" name="input" type="number" maxlength="3" placeholder="请输入年龄" v-model="age" />
      </view>
      <view class="blank"></view>
      <view class="uni-form-item">
        <view class="">您的性别</view>
        <radio-group class="c-flex" @change="radioChange1">
          <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in genderList" :key="item.value">
            <radio :value="item.value" :checked="index === current" />
            <text>{{item.title}}</text>
          </label>
        </radio-group>
      </view>
      <view class="blank"></view>
    </view>

    <view class="btn" @click="toDetail">开始评估</view>
    <view class="blank"></view>
    <view class="blank"></view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      genderList: [{
        title: '男',
        value: 'M'
      }, {
        title: '女',
        value: 'F'
      }],
      age: '',
      gender: 'M',
    }
  },
  onLoad(options) {
    console.log(`======onLoad==options=====>`,options)
    this.$store.state.FPorgId = options.orgId || ''
  },
  methods: {
    radioChange1(e) {
      console.log(e.detail.value);
      this.gender = e.detail.value
    },
    toDetail() {
      if (!this.age || Number(this.age) > 150) {
        uni.showToast({
          title: `年龄输入有误`,
          icon: "none"
        })
        return
      }

      if(!this.gender){
        uni.showToast({
          title: `请选择性别`,
          icon: "none"
        })
        return
      }

      uni.navigateTo({
        url: '/Questionnaire/questionnaire?age=' + this.age + '&gender=' + this.gender
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

.content {
  padding: 15px;
  font-size: 16px;
  line-height: 25px;
}

.item {
  .uni-form-item {
    padding: 10px;
    border-radius: 10px;
    background-color: #ffffff;

    /deep/ .uni-input {
      margin-top: 10px;
      background-color: #f2f2f2;
      padding: 10px;
    }
  }

  .c-flex {
    display: flex;
    align-items: center;

    & text {
      padding: 0 25px 0 5px;
    }
  }
}
</style>